<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>作者注册</title>
		<link rel="icon" href="images/icon.gif" type="image/x-ico">
		<!-- <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> -->
		<link href="css/style.css" rel='stylesheet' type='text/css'/>
		<link rel="stylesheet" href="css/nav.css">
		<link rel="stylesheet" href="iocnfont/iconfont.css">
		<link rel="stylesheet" href="css/gototop.css">
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

		<script>
			$(function (){
                //为注册按钮绑定事件
                $("#registerBtn").click(function () {
                    var password = $.trim($("#password").val());
                    var confirmPassword = $.trim($("#confirmPassword").val());

                    if (password !== confirmPassword){
                        $("#msg").html("两次输入的密码不一致");
                        return false;
                    }
                    $.ajax({
                        url: "author/register.do",
                        data: {
                            "fullname": $.trim($("#fullname").val()),
                            "username": $.trim($("#username").val()),
                            "password": $.trim($("#password").val()),
                            "summary": $.trim($("#summary").val()),
                            "grade": $.trim($("#grade").val()),
                            "transcription": $.trim($("#transcription").val()),
                        },
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            if (data) {
                                alert("注册成功");
                                //并跳转到登录页
                                window.location.href = "login-a.jsp";
                            }else {
                                alert("注册失败,请重试");
                            }
                        }
                    })


                })
			})
		</script>
	</head>
	<body>
		<!--注册页面 -->
		<div class="col-lg-9 col-md-9 col-xs-9 col-sm-9 center">
			<div class="dreamcrub">
				<ul class="breadcrumbs">
					<li class="home">
						<a href="index.jsp" title="返回首页">首页</a>&nbsp;
						<span>&gt;</span>
					</li>
					<li class="pickup">
						作者注册
					</li>
				</ul>
				<ul class="previous">
					<li><a href="index.jsp">返回首页</a></li>
				</ul>
				<div class="clearfix"></div>
			</div>
			<div class="register">
				<form>
					<div class="register-top-grid">
						<h3>作者信息</h3>
						<div>
							<span>姓名<label>*</label></span>
							<input type="text" id="fullname">
						</div>
						<div>
							<span>简介<label>*</label></span>
							<input type="text" id="summary">
						</div>
						<div>
							<label for="grade" class="col-sm-2 control-label">等级</label>
							<select class="form-control" id="grade">
								<option></option>
								<c:forEach items="${gradeList}" var="g">
									<option value="${g.value}">${g.text}</option>
								</c:forEach>
							</select>
						</div>
						<div>
							<span>是否转录<label>*</label></span>

							<select class="form-control" id="transcription">
								<option></option>
								<c:forEach items="${transcriptionList}" var="t">
									<option value="${t.value}">${t.text}</option>
								</c:forEach>
							</select>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="register-bottom-grid">
						<h3>登录信息</h3>
						<div>
							<span>用户名<label>*</label></span>
							<input type="text" id="username">
						</div>
						<div>
							<span>密码<label>*</label></span>
							<input type="password" id="password" style="border: 1px solid #DDDBDB;outline-color:#fb4d01;width: 96%;font-size:0.8125em;padding:10px;">
						</div>
						<div>
							<span>确认密码<label>*</label></span>
							<input type="password" id="confirmPassword" style="border: 1px solid #DDDBDB;outline-color:#fb4d01;width: 96%;font-size:0.8125em;padding:10px;">
						</div>
						<div class="checkbox" style="position: relative;top: 5px; left: 10px;">
							<span id="msg" style="color: red"></span>
						</div>
						<div class="clearfix"></div>
					</div>
				</form>
				<div class="clearfix"></div>
				<div class="register-but">
					<form >
						<input type="button" value="创建账户" id="registerBtn" style="background:#ff0d40;color: #FFF;font-size: 0.8em;padding: 0.7em 1.2em;transition: 0.5s all;display: inline-block;text-transform: uppercase;border:none;outline:none;">
						<div class="clearfix"></div>
					</form>
				</div>
			</div>
		</div>
		<div class="clearfix"></div>


		</div>
	</body>
</html>